<template>
  <div>
    <div class="shuru">
      <input
        type="text"
        v-model="zhi"
        @focus="jiance"
        @blur="jiance1"
        @keydown.38="shang"
        @keydown.40="xia"
      />
      <button @click="sousuo">百度一下</button>
      <ul>
        <li
          v-for="(i, item) in arr"
          :key="item"
          v-if="chuxian == true"
          @mouseover="huaguo(item)"
          :class="{ bianse: item == ii }"
        >
          {{ i }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      zhi: "",
      arr: [],
      chuxian: false,
      ii: "",
    };
  },,
  methods: {
    sousuo() {
      if (this.zhi.length > 0) {
        this.arr.push(this.zhi);
        this.zhi = "";
      }
    },
    jiance() {
      this.chuxian = true;
    },
    jiance1() {
      this.chuxian = false;
    },
    huaguo(item) {
      this.ii = item;
      this.zhi = this.arr[this.ii];
    },
    shang() {
      this.ii--;
      this.zhi = this.arr[this.ii];
    },
    xia() {
      this.ii++;
      this.zhi = this.arr[this.ii];
    },
  },
};
</script>

<style scoped>
ul,
li {
  list-style: none;
  height: 40px;

  width: 100%;
}
ul {
  position: absolute;
  width: 624px;
  top: 44px;
}
.bianse {
  background: red;
}
li {
  background: pink;
}
* {
  margin: 0;
  padding: 0;
}
.shuru {
  position: relative;
  width: 624px;
  box-sizing: border-box;
  height: 44px;
  margin: 100px auto;
}
input {
  width: 480px;
  border-color: #a7aab5;
  height: 16px;
  padding: 12px 16px;
  font-size: 16px;
  margin: 0;
  vertical-align: top;
  outline: 0;
  box-shadow: none;
  border-radius: 10px 0 0 10px;
  border: 2px solid #c4c7ce;
  background: #fff;
  color: #222;
  overflow: hidden;
  box-sizing: content-box;
  float: left;
}
button {
  float: left;
  cursor: pointer;
  width: 108px;
  height: 44px;
  line-height: 45px;
  line-height: 44px\9;
  padding: 0;
  background: 0 0;
  background-color: #4e6ef2;
  border-radius: 0 10px 10px 0;
  font-size: 17px;
  color: #fff;
  box-shadow: none;
  font-weight: 400;
  border: none;
  outline: 0;
}
</style>